<template><div class="sdy-goods-list"> 
    <SdyHander  title="啥都有~ 商品列别" back></SdyHander>
    <van-card
    v-for="item in goodsList"
  num="10"
  :price="item.originprice"
  :desc="item.desc"
  :title="item.proname"
  :thumb="item.img1">

  <template #footer>
    <van-button size="mini" type="warning">查看详情</van-button>
    <van-button size="mini" type="danger">添加购物车</van-button>
  </template>
  
</van-card>


    
   </div>
   </template> 
   <script setup lang="ts">
// 只要来过这个页面, 就相当于进入了一次搜索
// 就需要拿到带过来的信息, 存储在 localStorage 内
import {useRoute,type RouteLocationNormalizedLoaded } from 'vue-router';
 import {onMounted,ref} from 'vue'
 import { searchListApi } from '@/api/goods'
 import  type { MyHotItem } from '@/config/interface'


 const $route: RouteLocationNormalizedLoaded = useRoute()

 // 准备一个函数, 拿到搜索带过来的信息存储在 localStorage 内
 const setLocalStorage = (text: string): void => {
  const historyList: string[] = JSON.parse(window.localStorage.getItem('history') as string) || []
  // 把 text 追加到数组内, 然后重新存储回 localStorage 内
  // 如果历史记录内有和这个信息了, 不需要插入了

  // const res: boolean = historyList.indexOf(text) === -1
  // res === true 说明没有, 需要存储
  // if (res) {
    // 存储的逻辑
  // }
  // 代码来到这里, 是什么都不做的操作

  // const res: boolean = historyList.indexOf(text) !== -1
  // res === true 说明 有
  // 什么都不做
  // if (res) return
  // 有的逻辑

  const res: boolean = historyList.indexOf(text) !== -1

  if (res) return

  // 代码来到这里, 说明历史记录内没有记录过该信息
  historyList.push(text)

  // 再次把最新的数组存储到 localStorage 内
  window.localStorage.setItem('history', JSON.stringify(historyList))
}
// 1. 根据关键字请求当前页面的数据
// 需要用到携带过来的关键字
// 准备一个数据, 表示当前第几页
const count = ref<number>(1)


// 准备一个数据, 表示页面渲染数组
const goodsList = ref<MyHotItem[]>([])



const getGoodsList = async (text: string) => {
  // 根据 text 关键字请求列表渲染
  const res = await searchListApi(text,1)
  
  goodsList.value = res.data
  console.log(res.data);
  
  
 
}



 onMounted (() =>{
    const searchText = $route.query.search
  searchText && setLocalStorage(searchText as string)
  searchText && getGoodsList(searchText as string)
  
 })
</script>
<style scoped lang="scss">
 .dy-goods-list{
   height: 100%;
   overflow-y: auto;


 }



</style>